
<template>
  <div>
    <div
      ref="echarts"
      :style="{
        width: `${this.width}${widthUnit}`,
        height: `${this.height}${heightUnit}`,
      }"
      v-if="tableData"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "PieChart",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 400,
    },
    // 高度
    height: {
      type: [Number, String],
      default: 300,
    },
    // 宽单位
    widthUnit: {
      type: String,
      default: "px",
    },
    // 高单位
    heightUnit: {
      type: String,
      default: "px",
    },
    // 查询参数
    apiData: {
      type: Object,
      default: () => {},
    },
    // 是否显示加载中状态
    isLoading: {
      type: Boolean,
      default: false,
    },
    // 颜色
    colors: {
      type: Array,
      default: () => ["#52A36C", "#455AF7", "#FDBF20"],
    },
  },
  data() {
    return {
      tableData: [],
    };
  },
  watch: {
    data: {
      handler() {
        this.initEcharts();
      },
      deep: true,
    },
  },
  mounted() {
    this.getEvaluateData();
  },
  methods: {
    initEcharts() {
      // const resData = await getData(this.apiData);
      const option = {
        color: this.colors,
        title: {
          text: this.title,
          textStyle: {
            color: "#444",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          x: "right",
          orient: "vertical",
          data: this.tableData,
        },
        label: {
          formatter: "{c} \n \n {d}%",
        },
        series: [
          {
            name: "2",
            type: "pie", // 设置统计图类型
            selectedMode: "single", // 一次只能选中一个模块
            radius: [0, "70%"], // 圆的大小为父类的70%
            clockwise: false, // 逆时针开始排序
            data: this.tableData,
          },
        ],
      };
      console.log(
        "🚀 ~ file: evaluateTable.vue:125 ~ res.result.map ~  this.tableData:",
        this.tableData
      );
      const chart = echarts.init(this.$refs.echarts);
      chart.setOption(option);
    },

    // 获取数据库满意度
    getEvaluateData() {
      this.$http.get(`/evaluate`).then((res) => {
        res.result.map((res) => {
          this.tableData.push({ value: res.mark, name: res.user_id });
          this.initEcharts();   
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
